<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24" class="bg">
          <el-form :inline="true" :model="queryParam" class="demo-form-inline">
            <el-row>
              <el-form :inline="true" ref="queryForm" size="small" :model="queryParam" class="demo-form-inline">
                 <el-form-item label="字典类型名称">
                   <el-select v-model="queryParam.dictType" placeholder="请选择" @change="dictTypeChange"  clearable>
                      <el-option
                        v-for="item in dictTypeList"
                        :key="item.id"
                        :label="item.dictName"
                        :value="item.id">
                      </el-option>
                    </el-select>
<!--                  <el-input v-model="queryParam.dictName" placeholder="字典类型名称"></el-input>-->
                </el-form-item>

                <el-form-item label="状态" prop="status">
                   <el-select v-model="queryParam.status" placeholder="请选择"  clearable>
                      <el-option
                        v-for="item in dicts.sys_normal_disable"
                        :key="item.id"
                        :label="item.dictLabel"
                        :value="item.dictValue">
                      </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="创建时间"  >
                     <el-date-picker
                          v-model="createTimeValue"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期">
                        </el-date-picker>
                </el-form-item>

                 <el-form-item>
                   <el-button type="primary" @click="handleQuery" size="small">查询</el-button>
                   <el-button type="danger" @click="handleClose" size="small">返回</el-button>

                 </el-form-item>
             </el-form>
            </el-row>
            <el-row>
<!--              <el-button type="primary" size="small" icon="el-icon-plus"  @click="showDialog(1)">新增</el-button>-->
<!--              <el-button type="danger" size="small" icon="el-icon-delete"  @click="itemBatch_DEL" v-if="this.itemBatchData.length ===0" plain disabled>删除</el-button>-->
<!--              <el-button type="danger" size="small" icon="el-icon-delete"  @click="itemBatch_DEL" v-else >删除</el-button>-->
<!--              <el-button type="warning" size="small" icon="el-icon-bottom" plain disabled>导入</el-button>-->
<!--              <el-button type="success"  size="small" icon="el-icon-top" plain disabled >导出</el-button>-->
              <!-- <el-button type="warning" size="small" icon="el-icon-bottom" v-if="this.itemBatchData.length ===0" plain disabled>导入</el-button>-->
              <!-- <el-button type="warning" size="small" icon="el-icon-bottom" v-else>导入</el-button>-->
              <!-- <el-button type="success"  size="small" icon="el-icon-top" v-if="this.itemBatchData.length ===0" plain disabled >导出</el-button>-->
              <!-- <el-button type="success"  size="small" icon="el-icon-top" v-else >导出</el-button>-->
            </el-row>

          </el-form>

   <!--功能区-->
        <el-row :gutter="10" class="mb8">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd()"
                >新增</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="success"
                  plain
                  icon="el-icon-edit"
                  size="mini"
                  :disabled="single"
                  @click="handleUpdate()"
                >修改</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-delete"
                  size="mini"
                  :disabled="multiple"
                  @click="handleDelete()"
                >删除</el-button>
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="warning"
                  plain
                  icon="el-icon-download"
                  size="mini"
                  @click="handleExcel()"
                >导出</el-button>
              </el-col>

              <el-col :span="1.5">
                <el-button
                  type="danger"
                  plain
                  icon="el-icon-refresh"
                  size="mini"
                  @click="handleRefreshCache()"
                >刷新缓存</el-button>
              </el-col>
        </el-row>


        <el-table :data="tableData.rows" style="width: 100%"  ref="multipleTable" tooltip-effect="dark" @selection-change="handleSelectionChange">

        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column fixed prop="id" label="编码" width="80"> </el-table-column>
      <el-table-column prop="dictLabel" label="字典标签" width="120"> </el-table-column>
      <el-table-column prop="dictValue" label="字典键值" >
          <template slot-scope="scope">{{scope.row.dictValue}}</template>
      </el-table-column>

      <el-table-column  prop="status" label="状态"  width="80" align="center">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status==0">正常</el-tag>
          <el-tag type="info" v-else>停用</el-tag>
<!--          <DictTag :dataArray="dicts.sys_normal_disable" :value="scope.row.status"></DictTag>-->
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="创建者"  width="80" align="center"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"  width="80" align="center"> </el-table-column>

      <el-table-column prop="updateTime" label="更新时间">
          <template slot-scope="scope">
           <i v-if="scope.row.createTime!= null" class="el-icon-time"></i>
            <span v-if="scope.row.createTime!= null" style="margin-left: 10px">
              {{scope.row.createTime}}
            </span>
          </template>
      </el-table-column>

      <el-table-column prop="remark" label="备注" > </el-table-column>


        <el-table-column fixed="right" label="操作" width="170">
          <template slot-scope="scope">
              <el-button size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
        </el-table>
      </el-col>

     <!-- 新增和修改对话框-->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false" :before-close="cancelForm">
        <el-form ref="form" :model="form"   label-width="100px">

          <el-form-item   label="标签名" prop="dictLabel"  :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
            <el-input v-model="form.dictLabel" placeholder="请输入字典标签名"/>
          </el-form-item>

          <el-form-item  label="字典键值" prop="dictValue" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
            <!-- disabled 禁用输入 -->
            <el-input  type="text"  v-model="form.dictValue" placeholder="请输入字典键值" />
          </el-form-item>


          <el-form-item  label="字典类型" prop="dictType" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
            <el-input type="text"  v-model="form.dictType"  disabled placeholder="请输入字典键值" />
          </el-form-item>


          <el-form-item label="备注信息">
               <el-input  type="text" v-model="form.remark" placeholder="请输入备注信息" />
          </el-form-item>

          <el-form-item label="状态" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
            <el-radio-group v-model="form.status">
              <el-radio
                v-for="dict in dicts.sys_normal_disable"
                :key="dict.id"
                :label="dict.dictValue"
              >{{dict.dictLabel}}</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancelForm">取 消</el-button>
        </div>
     </el-dialog>
    </el-row>

  </div>
</template>

<script>


import PageMixin from '@/mixins/PageMixin.js'
import AddOrEditMixin from '@/mixins/AddOrEditMixin.js'
import DictMixin from '@/mixins/DictMixin.js'

import { dataAPI,editApi,findByIdApi,deleteByIdApi,addApi,freshCache } from '@/api/dictdata.js'
import { dataAllAPI } from '@/api/dicttype.js'
// import {dataAPI} from '@/api/dictdata.js'
export default {
  name: 'dicttype',
  mixins: [DictMixin, PageMixin,AddOrEditMixin],
  dicts: ['sys_normal_disable'],
  data() {
    return {
      primaryKey: 'id',
      dictTypeList: [],
      dictTypeName:"",
      from:{},
      fetchDataApi: dataAPI,
      editApi:editApi,
      findByIdApi:findByIdApi,
      deleteByIdApi:deleteByIdApi,
      addApi:addApi,
      freshCache:freshCache,
      allowSearch: false
    }
  },
  methods: {
    // 重置表单
    initFormValue(id,dictType){
      this.form = {
        status: '0',
        dictType: this.dictTypeName,
        dictTypeId:id
      }
    },
    // 跳转到明细页面
    jumpUrl(row) {
      this.$router.push('/dict/data/'+ row.id)
    },
      //加载所有的数据字典
       fetchAllDicType(id){
         dataAllAPI().then(resp=> {
           this.dictTypeList= resp.data.rows
           let dictType=""
           const arr = resp.data.rows.filter(x=>x.id == id)

           this.dictTypeName=arr[0].dictType
           console.log("看看效果")
           console.log(this.dictTypeName)
           this.initFormValue(id)
         })
       },
       //数据字典发生变化
       dictTypeChange(id){
         this.$set(this.queryParam,'dictType', id)
         this.$set(this.queryParam,'dictLabel', undefined)
         this.$set(this.queryParam,'status', undefined)
         this.queryParam.page=1
         this.fetchData()
       },
       //关闭
       handleClose(){
         this.$router.push('/dict/type')
       }
  },
  created(){
      // const params=this.$route.params;
      // console.log(params)
      // const id= params.id
      //
      // dataAPI({id:id}).then(resp => {
      //
      //   this.dicts = resp.data
      //   console.log("返回的DIC",this.dicts)
      // })


      const params = this.$route.params;
      const id = params.id
      //调用根据sys_dict_type  的id查询 sys_dict_data数据方法
      //https://v2.cn.vuejs.org/v2/api/#Vue-set
      this.$set(this.queryParam,'dictType', parseInt(id))
      //this.queryParam.dictType=parseInt(id)
      this.fetchAllDicType(id)
      this.fetchData()
  }
}
</script>

<style>
</style>
